import React, { PureComponent } from 'react'
import { Page, Filter, List, DropOption } from 'components'
import { connect } from 'dva'
import { Button, Row, Col, Popconfirm } from 'antd'<#if (modal)>
import Modal from './modal'</#if>

@connect(({ ${namespace},<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> loading }) => ({${namespace},<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> loading}))
class Index extends PureComponent {

	render() {
		const {location, dispatch, ${namespace},<#list fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> loading} = this.props
		
		const { query, pathname } = location
		
		const {<#list fields as field><#if (field.type=='TreeSelect')>${field.name}Tree,</#if></#list> list, pagination, currentItem, filterItems<#if (modal)>, modalType, modalVisible</#if>} = ${namespace}
		
		const handleRefresh = newQuery => {
			dispatch({type:'${namespace}/query',payload:{...query,...filterItems,...newQuery,pageSize:pagination.pageSize}})
		}
		<#if (modal)>
		
		const handleMenuClick = (record, key) => {
			const { dispatch } = this.props;
			if (key == 'update') {
				dispatch({
					type: '${namespace}/showModal',
					payload: { currentItem: record, modalType: 'update' },
				})
			} else if (key == 'delete') {
				dispatch({
					type: '${namespace}/delete',
					payload: {id:record.id}
				}).then(() => {
					handleRefresh({page:list.length === 1 && pagination.current > 1? pagination.current - 1: pagination.current})
				})
			}
		}</#if>
		
		const Columns=[<#list columns as field>
			{
				title:'${field.title}',
				dataIndex: '${field.dataIndex}',<#if (field.align)>
				align:'left',</#if><#if (field.render)>
				render:(text, record) => {
					return (text);
				}</#if>
			},</#list><#if (modal)>
			{
				title: '操作',
				width: 120,
				render: (text, record) => {
					return (
						<div>
							<a style={{ marginRight: 5 }} onClick={() => handleMenuClick(record, 'update')}>修改</a>
							<Popconfirm title="你確定要刪除此記錄嗎?" onConfirm={() => handleMenuClick(record, 'delete')}><a style={{ color: 'red' }}>刪除</a></Popconfirm>
						</div>
					)
				},
			}</#if>
		]
		
		const filterProps = {
			filterItemColumns:[<#list filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.label}',
					target: '${filter.name}',
					tip: '輸入${filter.label}',
					key: '${filter.name}',
				},</#list>
			],
			onFilterChange(fields) {
				dispatch({
					type: '${namespace}/updateState',
					payload: { filterItems: fields },
				})
				dispatch({
					type: '${namespace}/query',
					payload: {
						page: 1,
						pageSize: pagination.pageSize,
						...fields,
						...query,
					},
				})
			},<#if (modal)>
			btns:[
				{
					text:'新增',
					handle:()=>{
						dispatch({
							type: '${namespace}/showModal',
							payload: { modalType: 'create', currentItem: {} },
						})
					}
				}
			]
			</#if>
		}

		const listProps = {
			dataSource: list,
			loading: loading.effects['${namespace}/query'],
			Columns,
			pagination,
			onChange(page) {
				dispatch({
					type: '${namespace}/query',
					payload: {
						...query,
						...filterItems,
						page: page.current,
						pageSize: page.pageSize,
					},
				})
			},
		}
		<#if (modal)>
		const modalProps = {
			title: modalType == 'create' ? '新增' : '編輯',
			width:1000,
			item: currentItem,
			visible: modalVisible,
			modalType,<#list fields as field><#if (field.type=='DataList')>
			${namespace}${field.name? cap_first},</#if></#list><#list fields as field><#if (field.type=='TreeSelect')>
			${field.name}Tree,</#if></#list>
			dispatch,
			loading,
			confirmLoading: loading.effects[('${namespace}/create', '${namespace}/update')],
			wrapClassName: 'vertical-center-modal',
			onOk(data) {
				dispatch({
					type: `${namespace}/${r'${modalType}'}`,
					payload: data,
				}).then(() => {
					handleRefresh()
				})
			},
			onCancel() {
				dispatch({
					type: '${namespace}/hideModal',
				})
			},
		}</#if>
		
		return (
			<Page inner>
				<Filter {...filterProps} />
				<List {...listProps} />
				<#if (modal)><Modal {...modalProps} /></#if>
			</Page>
		)
	}
}

export default Index
